<template>
    <!-- 卡片视图区域 -->
    <el-card v-loading="isUserListLoading">
        <div class="card-header">
            <el-button @click="Init">
            <el-icon style="vertical-align: middle;">
                <RefreshLeft />
            </el-icon>
            <span style="vertical-align: middle;">重置</span>
        </el-button>
        <el-button type="primary" @click="handleAdd">
            <el-icon style="vertical-align: middle;">
                <CirclePlus />
            </el-icon>
            <span style="vertical-align: middle;">新增</span>
        </el-button>
        </div>
        <!-- 实现表格和分页 -->
        <el-table :data="userList" border :table-layout="tableLayout" :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ textAlign: 'center' }">
            <el-table-column type="index" label="序号" porp="id"></el-table-column>
            <el-table-column label="用户名" prop="username"></el-table-column>
            <el-table-column label="用户名" prop="nickname"></el-table-column>
            <el-table-column label="手机号" prop="mobile"></el-table-column>
            <el-table-column label="是否可用" prop="status">
                <template v-slot="scope">
                    <el-tag type="success" v-if="scope.row.status">可用</el-tag>
                    <el-tag type="warning" v-else>不可用</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="auto" min-width="280px">
                <template v-slot="scope">
                    <el-row :gutter="20" class="flex justify-center">
                        <el-tooltip content="编辑" placement="top" class="btn">
                            <el-button type="success" @click="handleEdit(scope.row)" icon="Edit" />
                        </el-tooltip>
                        <el-tooltip content="删除" placement="top" class="btn">
                            <el-button type="danger" @click="handleDelete(scope.row.id)" icon="Delete" />
                        </el-tooltip>
                        <el-tooltip content="分配角色" placement="top" class="btn">
                            <el-button type="primary" icon="User" @click="assignRoleFun(scope.row)" />
                        </el-tooltip>
                        <el-tooltip content="修改密码" placement="top" class="btn">
                            <el-button type="primary" icon="Lock" @click="chgePwd(scope.row.id)" />
                        </el-tooltip>
                    </el-row>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination class="pagination" background layout="prev, pager, next" :total="1000" v-model:current-page="page.pi" :page-count="page.ps"
        @current-change="handleCurrentChange"  />


        <edit-component ref="editRef" destroyOnClose :data="editData" @clean="resetDialog" />
        <add-component ref="addRef" destroyOnClose :data="addData"  @clean="resetDialog" />
        <update-pwd ref="updatePwdRef" destroyOnClose :data="updateData"  @clean="resetDialog" />
        <assign-role ref="assignRef" destroyOnClose :data="assignData"  @clean="resetDialog"/>
    </el-card>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import EditComponent from '~/pages/user/components/EditComponent.vue'
import AddComponent from '~/pages/user/components/AddComponent.vue'
import UpdatePwd from '~/pages/user/components/UpdatePwd.vue'
import AssignRole from '~/pages/user/components/AssignRole.vue'
import {
    toast,
    showModal
} from '~/composables/util.js'
import User from '~/api/user.js'

const isUserListLoading = ref(false);
const userList = ref([]);
const tableLayout = ref('auto');
const page = reactive({
        pi:1, //页码
        ps:5  //页数(可以自己设定)
})

const editRef = ref(null)
const addRef = ref(null)
const updatePwdRef = ref(null)
const assignRef = ref(null)

const editData = reactive({})
const addData = reactive({})
const updateData = reactive({})
const assignData = reactive({})

async function Init(){
    isUserListLoading.value = true

    await User.getUserList(page).then(res=>{
        userList.value = res.data.data.records
    })
    isUserListLoading.value = false
}

onMounted(async () => {
    Init()
})


const handleAdd = () => {
    // 处理新增用户的方法
    addData.username = ''
    addData.password = ''
    addData.mobile = ''
    addData.nickname = ''
    addData.status = true
    console.log(addData)
    // console.log(InitData)
    addRef.value.open()
};

const handleEdit = (row) => {

    // 处理编辑用户的方法
    editData.value = {...row}
    editRef.value.open()
};

const handleDelete = (id) => {
    // 处理删除用户的方法
    showModal('是否要删除该数据?').then(async () => {
        toast('正在删除中...', 'info', false, 3000)
        await User.deleteUser(id).then(res => {
            console.log(res)
            if(res.data.data !== null){
                toast('删除成功', 'success', false, 3000)
            }else{
                toast(res.data.msg, 'warning', false, 3000)
            }
            //将页面引导到第一页
            Init()
        }).catch(err=>{
            throw err
        })
    }).catch(err=>{
        console.log(err)
    })
};

const assignRoleFun = (item) => {
    // 分配角色的方法
    console.log(item)
    assignData.value = item
    assignRef.value.open()
};

const chgePwd = (id) => {
    // 密码修改的方法
    updateData.userId = id
    updatePwdRef.value.open()
};

const handleCurrentChange = () => {
    Init()
}


const resetDialog = () => {
    Init()
}

</script>

<style scoped>
.form {
    @apply flex justify-start items-center
}

.btn {
    margin: 0 10px;
}

.image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: var(--el-fill-color-light);
    color: var(--el-text-color-secondary);
    font-size: 30px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.roleList-scrollbar {
    max-width: 800px;
    max-height: 160px;
}

</style>